<template>
  <div class="pay">
    <div class="container pt40">
      <div class="step sp3 clearfix">
        <p class="first over">
          <span></span>
          <i>1</i>
          <em>我的购物车</em>
        </p>
        <p class="over">
          <i>2</i>
          <em>确认订单信息</em>
        </p>
        <p class="last">
          <i>3</i>
          <em>成功提交订单</em>
          <span></span>
        </p>
      </div>
    </div>
    <div class="container pt40 f14">
      <div class="cart-top clearfix">
        <div class="clearfix">
          <b class="f24 c333">确认订单信息</b>
        </div>
      </div>
      <dl class="tabox mt20">
        <dt>
          选择收货地址
          <router-link to="/my/address" style="float: right;">管理收货地址</router-link>
        </dt>
        <dd class="adress_select_area">
          <div id="ps2" class="hidden c333" style="display: block;align-items: center;">
            <div class="user-address">
              <div>
                <ul v-if="addressList.length" class="clearfix mt30">
                  <li
                    v-for="(item,index) in addressList"
                    :key="item.id"
                    :class="{active: addressActive === item.id}"
                    @click="chooseAddress(item.id)"
                  >
                    <el-radio
                      v-model="dz_radio"
                      :label="index"
                      style="display: flex;"
                      v-if="index<=0 || (index>0 &&fp_addressUp)"
                    >
                      <svg-icon icon-class="choose" class-name="choose" />
                      <div class="addbox">
                        <span>收货人：{{item.contact_name}}</span>
                        <span>电话：{{item.contact_phone}}</span>
                        <span>
                          地址：
                          {{item.province}} {{item.city}} {{item.district}}
                          {{item.address}}
                        </span>
                      </div>
                    </el-radio>
                  </li>
                </ul>
                <span v-else>暂无收获地址</span>
                <div
                  @click="btn_fp_addressUp"
                  class="dz_fpaddres"
                  style=" cursor: pointer;padding-left: 51px;margin-bottom: 20px;"
                >
                  <span v-if="fp_addressUp">收起</span>
                  <span v-else>展开更多</span>
                </div>
              </div>
              <div class="xz_btn" @click="showAddAddress = true">新增收货地址</div>
            </div>
          </div>
        </dd>
        <!-- 写死为工流界配送 -->
      </dl>

      <dl class="tabox mt20">
        <dt>发票信息</dt>
        <dd class="adress_select_area c333">
          <div class="bill_select_list pl20 hidden">
            <!--公司发票选型-->
            <div id="CompanyBill" class="hidden">
              <span class="fp_span" style="font-size:15px">发票信息</span>
              <span
                class="fp_span fp_btn"
                :class="fp_index === 1?'fp_xz':''"
                @click="xzfp_fn(1)"
              >增值税专用发票</span>
              <span
                class="fp_span fp_btn"
                :class="fp_index === 2?'fp_xz':''"
                @click="xzfp_fn(2)"
              >增值税普通发票</span>
              <span
                class="fp_span fp_btn"
                :class="fp_index === 3?'fp_xz':''"
                @click="xzfp_fn(3) "
              >暂不开票</span>
              <!-- <ul>

                <li v-for="item in invoices" :key="item.id">
                  <p><label><input type="radio" name="bill" checked="" @change="setBill(item)">{{item.company_name}}</label></p>
                </li>
              </ul>-->
              <!--增值税发票输入内容-->
              <div id="ZYBill" class="hidden" style="margin-top:20px" v-if="zbkp">
                <ul class="item-bill" style="width: 525px;" v-if="bill">
                  <li>
                    <span class="tt">公司名称：</span>
                    <span>{{bill.company_name}}</span>
                    <span
                      style="float: right;margin-right: 20px;cursor: pointer;color:#ff0000"
                      @click="fp_add_bj = true"
                    >编辑地址</span>
                    <!-- <input v-model="bill.company_name" name="ctl00$ContentPlaceHolder1$txtTitle3" type="text" id="ContentPlaceHolder1_txtTitle3" class="w400 txt" style="border: 1px solid #fff;"> -->
                  </li>
                  <li>
                    <span class="tt">纳税人识别号：</span>
                    <span>{{bill.credit_code}}</span>
                    <!-- <input v-model="bill.credit_code" name="ctl00$ContentPlaceHolder1$txtTaxNumber3" type="text" id="ContentPlaceHolder1_txtTaxNumber3" class="w400 txt" style="border: 1px solid #fff;"> -->
                  </li>
                  <li>
                    <span class="tt">公司地址：</span>
                    <span>{{bill.registered_address}}</span>
                    <!-- <input v-model="bill.registered_address" name="ctl00$ContentPlaceHolder1$txtInvoiceAddr3" type="text" id="ContentPlaceHolder1_txtInvoiceAddr3" class="w400 txt" style="border: 1px solid #fff;"> -->
                  </li>
                  <li>
                    <span class="tt">公司电话：</span>
                    <span>{{bill.phone}}</span>
                    <!-- <text name="ctl00$ContentPlaceHolder1$txtTel3_1" type="text" id="ContentPlaceHolder1_txtTel3_1" class="w400 txt" style="border: 1px solid #fff;">{{bill.phone}}</text> -->
                  </li>
                  <li>
                    <span class="tt">开户银行名称：</span>
                    <span>{{bill.bank}}</span>
                    <!-- <input v-model="bill.bank" name="ctl00$ContentPlaceHolder1$txtBankName3" type="text" id="ContentPlaceHolder1_txtBankName3" class="w400 txt" style="border: 1px solid #fff;"> -->
                  </li>
                  <li>
                    <span class="tt">银行账号：</span>
                    <span>{{bill.account}}</span>
                    <!-- <input v-model="bill.account" name="ctl00$ContentPlaceHolder1$txtBanknumber3" type="text" id="ContentPlaceHolder1_txtBanknumber3" class="w400 txt" style="border: 1px solid #fff;"> -->
                  </li>
                </ul>
                <span
                  v-else
                  @click="fpAdd_bj = true"
                  style="background: #ff0000;padding: 10px 20px;color:#fff;border-radius: 3px;cursor: pointer"
                >添加发票</span>
              </div>
              <div class="fp_dizhi">
                <div style="font-size:15px">发票地址</div>
                <div>
                  <ul v-if="addressList.length" class="clearfix mt10 ml20">
                    <li
                      v-for="(item,index) in addressList"
                      :key="item.id"
                      :class="{active: addressActive === item.id}"
                      @click="fpAddress(item.id)"
                      style="margin:5px 0"
                    >
                      <el-radio
                        v-model="fp_radio"
                        :label="index"
                        style="display: flex;"
                        v-if="index<=0 || (index>0 &&fp_addressUp)"
                      >
                        <div class="fp_addbox">
                          <span>收货人：{{item.contact_name}}</span>
                          <span>电话：{{item.contact_phone}}</span>
                          <span>
                            地址：
                            {{item.province}} {{item.city}} {{item.district}}
                            {{item.address}}
                          </span>
                        </div>
                      </el-radio>
                    </li>
                  </ul>
                  <div @click="btn_fp_addressUp" class="c_fpaddres">
                    <span v-if="fp_addressUp">收起</span>
                    <span v-else>展开更多</span>
                  </div>
                </div>
              </div>
              <div class="xz_btn" @click="showAddAddress = true">新增发票地址</div>
            </div>
          </div>
        </dd>
      </dl>
      <dl class="tabox tabox-noBtBorder mt20">
        <dt class="clearfix">
          商品清单
          <a href="#/cart" class="c4448f8 fr">返回购物车修改</a>
        </dt>
        <dd class="cart_check_table">
          <div id="J-proList" class="hidden">
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="f12">
              <colgroup>
                <col width="380" />
                <col width="*" />
                <col width="*" />
                <col width="*" />
                <col width="140" />
              </colgroup>
              <tbody>
                <tr class="c999">
                  <th>商品</th>
                  <th>市场价</th>
                  <th>会员价</th>
                  <th>数量</th>
                  <th>小计</th>
                </tr>
                <tr v-for="item in carts" :key="item.id">
                  <td>
                    <dl>
                      <dt>
                        <router-link :to="`/detail/${item.product.id}`">
                          <img :src="item.product.image" />
                        </router-link>
                      </dt>
                      <dd>
                        <router-link
                          :to="`/detail/${item.id}`"
                        >{{item.product.brand_name}} {{item.series_name}} {{item.category_name}}</router-link>
                        <p class="c999">
                          订货号：{{item.product.part_number}}
                          <br />
                          产品型号：{{item.product.model_name}}
                        </p>
                      </dd>
                    </dl>
                  </td>
                  <td class="priceStyle">¥{{item.product.price}}</td>
                  <td
                    class="priceStyle"
                  >¥{{Number(item.product.discount_price.toString().match(/^\d+(?:\.\d{0,2})?/))}}</td>
                  <td>{{item.amount}}</td>
                  <td class="priceStyle2">
                    <span
                      class="cff0000"
                    >¥{{(item.product.discount_price * item.amount).toFixed(2)}}</span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </dd>
      </dl>
      <div class="tabox bgf8f8f8 plr40 ptb20 mt20 yhq">
        <div class="relative">
          <p class="c333">
            订单备注
            <span class="c999">
              （如果您有其他特殊要求或说明，可对订单进行备注，或者
              <a
                href="https://wpa.qq.com/msgrd?v=3&uin=578898066&site=qq&menu=yes"
                target="_blank"
                class="cff0000"
              >联系在线客服</a>。）
            </span>
          </p>
          <textarea
            v-model="remark"
            style="width: 600px;"
            class="bd1 p10 w600 h60 mt20 txt"
            rows="3"
            placeholder="请在此填写您对该订单的特殊要求或说明"
          ></textarea>
        </div>
          <div class="yhq_body">
          <div>消费优惠券：</div>
          <el-select v-model="valueitem" placeholder="请选择" @change="addcoupon">
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.code+'-'+item.value+'-'+item.type"
              :multiple='false'
            ></el-option>
          </el-select>
          <div>-￥{{discount}}</div>
        </div>
      </div>
      <div class="mt30 textr c333 line24" style="text-align: right;">
        <div>
          共
          <i class="cff0000">1</i> 种
          <i class="cff0000">{{totalAmount}}</i> 件商品 合计：
          <i class="cff0000">¥{{Number(totalPrice.toString().match(/^\d+(?:\.\d{0,2})?/))}}</i>
        </div>
        <div>
          运费：
          <span class="cff0000 deliveryprice">¥0.00</span>
        </div>
        <div>
          优惠：
          <span class="cff0000">¥{{discount}}</span>
        </div>
        <div>
          应付总额：
          <span
            class="f18 cff0000 totalprice"
          >¥{{Number(totalPrice.toString().match(/^\d+(?:\.\d{0,2})?/))}}</span>
        </div>
        <p class="mt30 f18">
          <a
            href="#/cart"
            class="bg4448f8 dl w200 h50 center xg_btn"
            style="padding:11px 20px"
          >返回购物车修改</a>
          <a
            id="ContentPlaceHolder1_lbtnSubmit"
            class="ml20 bgff0000 dl w200 h50 center xg_btn"
            style="padding:11px 50px;cursor: pointer;"
            @click="addOrder"
          >提交订单</a>
        </p>
      </div>
    </div>
    <div class="fp_nbj" v-if="fp_add_bj"></div>
    <div class="fp_add" v-if="fp_add_bj">
      <el-form :label-position="labelPosition" label-width="150px" :model="bill">
        <el-form-item label="公司名称：">
          <el-input v-model="bill.company_name"></el-input>
        </el-form-item>
        <el-form-item label="纳税人识别号：">
          <el-input v-model="bill.credit_code"></el-input>
        </el-form-item>
        <el-form-item label="公司地址：">
          <el-input v-model="bill.registered_address"></el-input>
        </el-form-item>
        <el-form-item label="公司电话：">
          <el-input v-model="bill.phone"></el-input>
        </el-form-item>
        <el-form-item label="开户银行名称：">
          <el-input v-model="bill.bank"></el-input>
        </el-form-item>
        <el-form-item label="银行账号：">
          <el-input v-model="bill.account"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="moInvoices">修改发票信息</el-button>
          <el-button @click="fp_add_bj = false">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="fp_nbj" v-if="fpAdd_bj"></div>
    <div class="fp_add" v-if="fpAdd_bj">
      <el-form :label-position="labelPosition" label-width="150px" :model="fpAdd">
        <el-form-item label="公司名称：">
          <el-input v-model="fpAdd.company_name"></el-input>
        </el-form-item>
        <el-form-item label="纳税人识别号：">
          <el-input v-model="fpAdd.credit_code"></el-input>
        </el-form-item>
        <el-form-item label="公司地址：">
          <el-input v-model="fpAdd.registered_address"></el-input>
        </el-form-item>
        <el-form-item label="公司电话：">
          <el-input v-model="fpAdd.phone"></el-input>
        </el-form-item>
        <el-form-item label="开户银行名称：">
          <el-input v-model="fpAdd.bank"></el-input>
        </el-form-item>
        <el-form-item label="银行账号：">
          <el-input v-model="fpAdd.account"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="setInvoices">添加发票信息</el-button>
          <el-button @click="fpAdd_bj = false">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!--      新增收货地址-->
    <el-dialog title="新增收货地址" :visible.sync="showAddAddress" width="50%">
      <div class>
        <el-form
          :model="newAddressInfor"
          :rules="rules"
          ref="newAddressInfor"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="收货人：" prop="contact_name">
            <el-input v-model="newAddressInfor.contact_name" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="所在地区：" prop="province">
            <el-select
              v-model="newAddressInfor.province"
              @change="changProvince"
              style="margin-right: 10px"
              placeholder="请选择省份"
            >
              <el-option
                v-for="area in provinceData"
                :key="area.id"
                :label="area.name"
                :value="area.name"
              ></el-option>
            </el-select>
            <el-select
              v-model="newAddressInfor.city"
              @change="changeCity"
              style="margin-right: 10px"
              placeholder="请选择城市"
            >
              <el-option
                v-for="city in cityData"
                :key="city.id"
                :label="city.name"
                :value="city.name"
              ></el-option>
            </el-select>
            <el-select
              v-model="newAddressInfor.district"
              style="margin-right: 10px"
              placeholder="请选择区/县"
            >
              <el-option
                v-for="district in districtData"
                :key="district.id"
                :label="district.name"
                :value="district.name"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="详细地址：" prop="address">
            <el-input v-model="newAddressInfor.address" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="手机号码：" prop="contact_phone">
            <el-input v-model="newAddressInfor.contact_phone" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="固定电话：">
            <el-input v-model="newAddressInfor.number" style="width: 250px"></el-input>
          </el-form-item>
          <el-form-item label="邮政编码：">
            <el-input v-model="newAddressInfor.postId" style="width: 250px"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showAddAddress = false">取 消</el-button>
        <el-button type="success" @click="testAdd">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script type="text/javascript" src="https://tajs.qq.com/stats?sId=66566068" charset="UTF-8"></script>
<script>
import { mapMutations } from "vuex";
import { paymentDict } from "@/utils/dict";
import { cartList } from "@/api/cart";
import { addOrders } from "@/api/order";
import { storeCartList } from '@/api/business'
import {
  getAddress,
  addInvoices,
  getInvoices,
  modifyInvoices,
  addAddress,
  updateAddress,
  getProvinceList
} from "@/api/user";
import {couponUserListky} from '@/api/goods'
import { NumberMul, NumberAdd } from "@/utils/number";
export default {
  name: "Check",
  metaInfo: {
    title: "我的购物车",
    titleTemplate: "工流界MRO一站式采购商城"
  },
  data() {
    return {
      order: "",
      paymentDict,
      carts: [],
      addressList: [],
      totalPrice: "",
      totalPriceto:'',
      fp_addressUp: false,
      totalAmount: "",
      addressActive: "",
      showAddAddress: false,
      bill: {
        company_name: "",
        credit_code: "",
        registered_address: "",
        phone: "",
        bank: "",
        account: ""
      },
      fpId: "",
      fpAdd: {
        company_name: "",
        credit_code: "",
        registered_address: "",
        phone: "",
        bank: "",
        account: ""
      },
      fpAdd_bj: false,
      remark: "",
      invoices: [],
      dz_radio: 0,
      fp_radio: 0,
      fp_index: 1,
      labelPosition: "right",
      fp_add_bj: false,
      zbkp: true,
      invoice_type: "general",
      invoice_address_id: "",
      areaList: [], // 所有省市区的数据
      provinceData: [], // 省
      cityData: [], // 市
      districtData: [], // 区、县
      addressList: [],
      checkBoxList: [],
      newAddressInfor: {
        contact_name: "",
        province: "",
        city: "",
        district: "",
        address: "",
        contact_phone: "",
        number: "",
        postId: ""
      },
      rules: {
        contact_name: [{ required: true, message: "必填项", trigger: "blur" }],
        province: [
          {
            required: true,
            message: "省市区必填项",
            trigger: ["blur", "change"]
          }
        ],
        address: [{ required: true, message: "必填项", trigger: "blur" }],
        contact_phone: [
          {
            required: true,
            message: "必填项",
            trigger: "blur"
          }
        ]
      },
      options: [

      ],
      valueitem: "",
      discount:0,
      couponcode:''
      // formLabelAlign: {
      //   name: '',
      //   region: '',
      //   type: ''
      // }
    };
  },
  created() {
    const Lista = this.$route.query.ids;
    this.checkBoxList = Lista.split(",");
    // this.sxneew()
    this.fetchCarts();
    this.getAddressList();
    this.fetchInvoices();
    
    this.setHasNav(false);
    

    // this.$router.push('/cart');
  },
  mounted() {
    this.setHasNav(false);
    // this.getAddressList()
    this.getareaList();
  },
  methods: {
    ...mapMutations({
      setHasNav: "app/SET_PAGE_HAS_NAV"
    }),
    sxneew() {
      window.location.reload();
    },
    async fetchCarts() {
      const res = await cartList();
      // this.carts = res
      for (let i = 0; i < this.checkBoxList.length; i++) {
        for (let j = 0; j < res.length; j++) {
          if (this.checkBoxList[i] == res[j].id) {
            this.carts.push(res[j]);
          }
        }
      }
      console.log(this.carts);
      this.totalAmount = this.carts.reduce((pre, cur) => {
        return NumberAdd(pre, cur.amount);
      }, 0);
      this.totalPrice = this.totalPriceto = this.carts.reduce((pre, cur) => {
        return NumberAdd(
          pre,
          NumberMul(cur.amount, cur.product.discount_price)
        );
      }, 0);
      this.getcouponList()
      // this.carts = res
    },
    async addOrder() {
      const items = [];
      this.carts.forEach(item => {
        items.push({
          product_id: item.product_id,
          amount: item.amount
        });
      });
      if (this.addressActive == "" || this.addressActive == undefined) {
        this.$message.error("请填写收货地址");
        console.log;
        return;
      }
      if (this.invoice_type !== "" || this.invoice_type !== undefined) {
        if (
          this.invoice_address_id == "" ||
          this.invoice_address_id == undefined
        ) {
          this.$message.error("请填发票地址或信息");
          return;
        }
      }
      const res = await addOrders({
        items,
        address_id: this.addressActive,
        remark: this.remark,
        invoice_type: this.invoice_type,
        invoice_address_id: this.invoice_address_id,
        coupon_code:this.couponcode

      });
      this.$router.push(`/pay/${res.id}`);
    },
    chooseAddress(id) {
      this.addressActive = id;
    },
    fpAddress(id) {
      console.log();
      this.invoice_address_id = id;
    },
    setBill(item) {
      this.bill = item;
    },
    // 获取发票信息
    async fetchInvoices() {
      const res = await getInvoices();
      this.invoices = res;
      this.bill = res[0];
      this.fpId = res[0].id;
    },
    // 获取已存在的地址列表
    async getAddressList() {
      const res = await getAddress();
      if (res.length > 0) {
        this.addressList = res;
        this.addressActive = res.length ? res[0].id : "";
        this.invoice_address_id = res.length ? res[0].id : "";
      }
    },
    // 添加发票信息
    async setInvoices() {
      const res = await addInvoices(this.fpAdd);
      this.fpAdd_bj = false;
      this.$message.success("发票信息填写成功");
      console.log(res);
    },
    // 修改发票信息
    async moInvoices() {
      const xdata = {
        company_name: this.bill.company_name,
        credit_code: this.bill.credit_code,
        registered_address: this.bill.registered_address,
        phone: this.bill.phone,
        bank: this.bill.bank,
        account: this.bill.account
      };
      const res = await modifyInvoices(xdata, this.fpId);
      this.fp_add_bj = false;
      this.$message.success("发票信息修改成功");
    },

    xzfp_fn(index) {
      this.fp_index = index;
      switch (index) {
        case 1:
          this.zbkp = true;
          this.invoice_type = "general";
          break;
        case 2:
          this.zbkp = true;
          this.invoice_type = "special";
          break;
        case 3:
          this.zbkp = false;
          this.invoice_type = "";
          break;
      }
    },
    btn_fp_addressUp() {
      this.fp_addressUp = !this.fp_addressUp;
    },
    fp_onSubmit() {},
    //     async getAddressList () { // 获取已存在的地址列表
    //   const res = await getAddress()
    //   if (res.length > 0) {
    //     this.addressList = res
    //   }
    // },
    async getareaList() {
      // 获取省市区
      const res = await getProvinceList();
      this.areaList = res;
      this.getAllProvinceList();
    },
    getAllProvinceList() {
      // 获取省列表
      for (var p of this.areaList) {
        var province = {};
        province.id = p.id;
        province.name = p.name;
        this.provinceData.push(province);
      }
    },
    changProvince() {
      // 当省发生改变时
      for (var p in this.areaList) {
        if (
          this.showAddAddress &&
          this.areaList[p].name === this.newAddressInfor.province
        ) {
          this.cityData = this.areaList[p].children;
          this.newAddressInfor.city = this.cityData[0].name;
          this.changeCity();
        }
        if (
          this.showEditAddress &&
          this.areaList[p].name === this.editAddressInfor.province
        ) {
          this.cityData = this.areaList[p].children;
          this.editAddressInfor.city = this.cityData[0].name;
          this.changeCity();
        }
      }
    },
    changeCity() {
      // 当市发生改变时
      for (var c in this.cityData) {
        if (
          this.showAddAddress &&
          this.cityData[c].name === this.newAddressInfor.city
        ) {
          this.districtData = this.cityData[c].children;
          this.newAddressInfor.district = this.districtData[0].name;
        }
        if (
          this.showEditAddress &&
          this.cityData[c].name === this.editAddressInfor.city
        ) {
          this.districtData = this.cityData[c].children;
          this.editAddressInfor.district = this.districtData[0].name;
        }
      }
    },
    // 校验新增地址
    testAdd() {
      this.$refs.newAddressInfor.validate(valid => {
        if (valid) {
          this.addAddressEvent();
        } else {
          return false;
        }
      });
    },
    async addAddressEvent() {
      // 提交新地址
      const res = await addAddress(this.newAddressInfor);
      if (res.created_at) {
        this.getAddressList();
        this.showAddAddress = false;
      }
    },
    // 获取优惠券
    async getcouponList(){
      const res = await couponUserListky();
      // 更具金额匹配
      res.forEach(item => {
        if(Number(this.totalPrice) >= Number(item.min_amount) ){
          this.options.push(item)
        }
      })
      // this.options = res
    },
    // 选择优惠券
    addcoupon(e){
      let coupone = e.split('-')
      this.couponcode = coupone[0]
      this.totalPrice = this.totalPriceto
      // 根据类型计算价格
      if(coupone[2] === 'fixed'){
        this.discount = Number(coupone[1]).toFixed(2)
      }else if(coupone[2] === 'percent'){
        this.discount = (Number(this.totalPrice)/100*parseInt( coupone[1])).toFixed(2)
      }
      this.totalPrice = Number(this.totalPrice) - Number(this.discount) 
    }
  }
};
</script>

<style lang="scss" scoped>
.line24 > div {
  margin-bottom: 10px;
}
.step {
  background: #ccc;
  height: 5px;
  margin: 16px 0 45px;
  display: block;
  font-size: 0;
}

.step.adtime {
  margin-bottom: 72px;
}

.step p {
  float: left;
  text-align: center;
  position: relative;
  height: 5px;
}

.sp3 p {
  width: 33.333333%;
}

.sp5 p {
  width: 50%;
}

.step p.first span,
.step p.last span {
  width: 3px;
  height: 5px;
  position: absolute;
  top: 0;
  display: block;
}

.step p.first span {
  background-position: -7px -361px;
  left: 0;
}

.step p.last span {
  background-position: -10px -361px;
  right: 0;
}

.step p i {
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -19px 0 0 -18px;
  background-position: 0 -404px;
  font-size: 16px;
  color: #fff;
  background-color: #db0012;
  border-radius: 50%;
  font-weight: bold;
}

.step p i bdo {
  width: 20px;
  height: 14px;
  position: absolute;
  left: 50%;
  top: 50%;
  background-position: -37px -393px;
  margin: -7px 0 0 -10px;
}

.step p em {
  width: 100%;
  display: block;
  height: 16px;
  line-height: 16px;
  font-size: 16px;
  bottom: -32px;
  position: relative;
  color: #aaa;
}

.step p label {
  color: #999;
  bottom: -50px;
  position: relative;
  width: 100%;
  font-size: 12px;
  line-height: 12px;
  height: 12px;
  display: block;
}

.step p.over {
  background: #ff0000;
}

.step p.first.over span {
  background-position: 0 -361px;
}

.step p.over i {
  background-position: 0 -368px;
}

.step p.over em {
  color: #ff0000;
}

.step p.last.over span {
  background-position: -3px -361px;
}

.order-detail {
  margin-bottom: 20px;
  background-color: #4448f8;
  color: #ffffff;
}

.tabox {
  border: 1px solid #e6e6e6;
}

.tabox dt {
  height: 38px;
  line-height: 38px;
  background: #f8f8f8;
  padding: 0 20px;
  font-size: 14px;
  border-bottom: 1px solid #e6e6e6;
}

.tabox dt .u-unfold {
  display: inline-block;
  cursor: pointer;
  font-size: 12px;
  padding: 0 10px;
  color: #999;
}

.tabox dt .u-unfold:hover {
  color: #4448f8;
}

.tabox dt a {
  font-size: 12px;
}

.tabox-noBtBorder {
  border-bottom: 0;
}
.adress_select_area {
  padding: 20px;
  line-height: 30px;
}

.adress_select_area label {
  display: block;
  font-size: 14px;
  font-weight: bold;
}

.adress_select_area p span {
  color: #999;
  margin-left: 10px;
  display: none;
}

.adress_select_area p a.oparet {
  margin-left: 10px;
  display: none;
}

.adress_select_area p:hover span,
.adress_select_area p:hover a.oparet {
  display: inline-block;
}

.adress_select_area input {
  margin-right: 10px;
  vertical-align: middle;
  margin-top: -3px;
}

.adress_select_area a.adressadd {
  width: 140px;
}

.user-address ul {
  padding-left: 18px;
  li {
    // float: left;
    // width: 280px;
    // height: 164px;
    overflow: hidden;
    position: relative;
    margin: 0 12px 10px;
    cursor: pointer;
    .choose {
      display: none;
      position: absolute;
      right: 15px;
      top: 15px;
      width: 30px;
      height: 30px;
    }
    &.active {
      .choose {
        display: block;
      }
    }
    .addbox {
      cursor: default;
      // background: url(~@/assets/img/address_bg2.jpg) no-repeat 0 0;
      color: #666;
      font-size: 15px;
      // &:hover{
      //   background: url(~@/assets/img/address_bg2.jpg) no-repeat -280px 0;
      //   .edit,.set{
      //     display: block;
      //   }
      // }
      .default,
      .set {
        position: absolute;
        right: 0;
        bottom: 12px;
      }
      h1 {
        border-bottom: 1px solid #e6e6e6;
        width: 250px;
        margin: 0 auto;
        padding-bottom: 10px;
        padding-top: 10px;
        position: relative;
        font-size: 12px;
        color: #666;
      }
      h2 {
        border-bottom: 1px solid #e6e6e6;
        width: 250px;
        margin: 0 auto;
        padding-bottom: 8px;
        padding-top: 10px;
        height: 48px;
        line-height: 24px;
        font-size: 12px;
      }
      h3 {
        width: 250px;
        margin: 0 auto;
        padding-top: 12px;
        position: relative;
        font-size: 12px;
      }
      .cff0000,
      a.cff0000,
      a.cff0000:hover {
        color: #ff0000;
      }
      a.c999,
      .c999 {
        color: #999;
      }
      .edit {
        display: none;
        position: absolute;
        right: 0;
        top: 12px;
        a {
          margin-left: 10px;
        }
      }
    }
    .addbox > span:nth-child(1) {
      margin-right: 15px;
    }
    .addbox > span:nth-child(2) {
      margin-right: 15px;
    }
    &.user-add a {
      display: block;
      background: url(~@/assets/img/address_bg2.jpg) no-repeat;
      background-position: 0 0;
      width: 280px;
      height: 104px;
      font-size: 16px;
      color: #666;
      text-align: center;
      padding-top: 60px;
      -webkit-transition: all 0s;
      -moz-transition: all 0s;
      transition: all 0s;
      &:hover {
        background-position: -280px 0;
      }
      em {
        display: block;
        width: 4px;
        height: 26px;
        margin: 0 auto 8px;
        position: relative;
        background: #bbb;
        i {
          width: 26px;
          height: 4px;
          position: absolute;
          left: 50%;
          top: 50%;
          margin: -2px 0 0 -13px;
          background: #bbb;
        }
      }
    }
  }
}
.item-bill {
  display: inline-block;
  border: 1px solid #ababab;
}
.adress_select_area .item-bill .tt {
  display: inline-block;
  width: 130px;
  box-sizing: border-box;
  padding-right: 10px;
  text-align: right;
}

.adress_select_area .item-bill li {
  margin: 5px 0;
}

.adress_select_area .item-bill input[type="text"] {
  width: 304px;
  height: 28px;
  box-sizing: border-box;
  margin-right: 0;
  padding: 8px;
  border: 1px solid #dedede;
}

.adress_select_area .item-bill input[type="text"].zone {
  width: 100px;
}

.adress_select_area .item-bill input[type="text"].tel {
  width: 188px;
}

.adress_select_area .item-bill .line {
  margin: 0 5px;
}

.cart_check_table {
}

.cart_check_table th {
  border-bottom: 1px solid #e6e6e6;
  text-align: center;
  height: 38px;
  padding: 0 10px;
}

.cart_check_table td {
  border-bottom: 1px solid #e6e6e6;
  text-align: center;
  padding: 20px 0;
  color: #333;
}

.cart_check_table td .proModel {
  overflow: hidden;
}

.cart_check_table td .proModel img {
  display: inline-block;
  vertical-align: middle;
  margin-right: 6px;
}

.cart_check_table td .proModel .cnt {
  display: inline-block;
  max-width: 160px;
  word-break: break-all;
  vertical-align: middle;
}

.cart_check_table td.priceStyle {
  font-weight: bold;
}

.cart_check_table td.priceStyle2 {
  font-weight: bold;
}

.cart_check_table td.tb-first,
.cart_check_table th.tb-first {
  text-align: center;
}

.cart_check_table td.tb-first input[type="checkbox"],
.cart_check_table th.tb-first input[type="checkbox"] {
  margin-right: 0;
  margin-top: -3px;
}

.cart_check_table td.t-left {
  text-align: left;
}

.cart_check_table.tabtb10 td {
  padding: 10px;
  vertical-align: middle;
  border-right: 1px solid #e6e6e6;
  word-break: break-all;
}

.cart_check_table.tabtb10 td.tb-last {
  border-right: none;
  width: 60px;
}

.replace_text {
  display: inline-block;
}

.cart_check_table.tabtb10 td.txtl {
  text-align: left;
}

.cart_check_table.tabtb10 td.td-proId {
  text-align: left;
}

.cart_check_table.tabtb10 th {
  background: #f8f8f8;
  height: 48px;
  line-height: 48px;
}

.cart_check_table dl {
  width: 300px;
  margin: 0 auto;
}

.cart_check_table dl dt {
  float: left;
  background: none;
  border: none;
  height: auto;
  padding: 0;
  line-height: 0;
}

.cart_check_table dl dt img {
  width: 80px;
  height: 80px;
  border: 1px solid #e6e6e6;
  margin-top: 3px;
}

.cart_check_table dl dd {
  padding-left: 95px;
  width: 200px;
  text-align: left;
  line-height: 22px;
}

.cart_check_table dl dd.pl70 {
  padding-left: 70px;
}
.xg_btn {
  background: red;
  line-height: 5;
  color: #fff;
  border-radius: 3px;
}
.xz_btn {
  background: red;
  color: #fff;
  padding: 5px 30px;
  border-radius: 3px;
  display: inline-block;
  margin-left: 50px;
  cursor: pointer;
}
.fp_span {
  margin-right: 30px;
}
.fp_btn {
  padding: 10px 20px;
  border: 1px solid #ababab;
  cursor: pointer;
}
.fp_dizhi {
  border-top: 1px solid #ababab;
  margin-top: 20px;
  display: flex;
  padding: 20px 0;
}
.fp_xz {
  background-image: url("../../assets/img/fp_xz.png");
  background-position: right bottom; /*Positioning*/
  background-repeat: no-repeat; /*Prevent showing multiple background images*/
  border: 1px solid red !important;
  background-size: 20%;
}
.c_fpaddres {
  padding-left: 44px;
  margin-top: 20px;
  cursor: pointer;
}
.fp_addbox {
  span {
    margin-right: 20px;
  }
}
.fp_add {
  width: 600px;
  position: fixed;
  /* top: 0; */
  z-index: 999;
  padding: 20px;
  background: #fff;
  top: 33%;
  left: 35%;
  border: 1px solid #666;
  border-radius: 10px;
}
.fp_nbj {
  background: rgba($color: #000000, $alpha: 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 990;
}
.dz_fpaddres {
}
.yhq{
  display: flex;
}
.yhq_body{
  display: flex;
  align-items: center;
  margin-left: 40px;
  >div{
    &:nth-child(1){
      font-size: 18px;
      font-weight: 600;
      color: #333333;
    }
    &:nth-child(3){
      color: #db0012;
      margin-left: 40px;
      font-size: 18px;
      font-weight: 600;
    }
  }
}
</style>
